@extends('admin.layout.main')
@section('content')
	    <!-- daterange picker -->
    <link rel="stylesheet" href="{{asset('/adminlte/plugins/daterangepicker/daterangepicker.css')}}">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="{{asset('/adminlte/plugins/iCheck/all.css')}}">
    <style type="text/css">
      .left-filter{margin-left:8px;}
    </style>
    <section class="content-header">
      <h1>亲友圈游戏统计<span style="font-size:15px">{{$period}}</span></h1>
      <ol class="breadcrumb">
        <li><a href="javascript:void(0)"><i class="fa fa-dashboard"></i> 亲友圈统计</a></li>
        <li class="active">游戏局数统计</li>
      </ol>
    </section>
    <section class="content">
        <a type="button" class="btn btn-info pull-left filter-game" href="javascript:void(0)"><i class="fa fa-fw fa-search"></i>筛选</a>
        <div class="row">
            <div class="col-md-6">

              <div class="box box-primary">
                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>

                  <h3 class="box-title">游戏局数：{{$total}}局</h3>

                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div id="bar-chart" style="height: 300px;"></div>
                </div>
                <!-- /.box-body-->
              </div>

            </div>
        </div>    
    </section>
    <!-- datepicker -->
    <script src="{{asset('/adminlte/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
    <script src="{{asset('/adminlte/plugins/chartjs/Chart.min.js')}}"></script>
    <!-- date-range-picker -->
    <script src="{{asset('/js/moment.min.js')}}"></script>
    <script src="{{asset('/adminlte/plugins/daterangepicker/daterangepicker.js')}}"></script>
    <!-- iCheck 1.0.1 -->
    <script src="{{asset('/adminlte/plugins/iCheck/icheck.min.js')}}"></script>
    <!-- DataTables -->
    <script src="{{asset('/adminlte/plugins/datatables/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('/adminlte/plugins/datatables/dataTables.bootstrap.min.js')}}"></script>
    <!-- FLOT CHARTS -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.min.js')}}"></script>
    <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.resize.min.js')}}"></script>
    <!-- FLOT PIE PLUGIN - also used to draw donut charts -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.pie.min.js')}}"></script>
    <!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.categories.min.js')}}"></script>
    <script type="text/javascript">
  		$(function () {
	        var data = {!! $data !!};
	        if (data.length) {
	          var bar_data = {
	            data: data,
	            color: "#38A0F0"
	          };
	          $.plot("#bar-chart", [bar_data], {
	            grid: {
	              borderWidth: 1,
	              borderColor: "#f3f3f3",
	              tickColor: "#f3f3f3"
	            },
	            series: {
	              bars: {
	                show: true,
	                barWidth: 0.5,
	                align: "center"
	              }
	            },
	            xaxis: {
	              mode: "categories",
	              tickLength: 0
	            }
	          });
	        }
      	});
		$('.filter-game').click(function(){
			dialog_from('/admin/circle_log/filter/'+"{{$agent->id}}", '筛选');
		});
    </script>
@endsection